<template>
  <div>
    <a-form layout="vertical">
      <a-row :gutter="12">
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item label="起算天数">
            <a-input-group compact>
              <a-input-number
                style="width: 70%"
                placeholder="起算天数"
                v-model:value="modelRef.startDay"
                :min="0"
              />
              <span class="item-unit">天</span>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item label="滞纳金比例">
            <a-input-group compact>
              <a-input-number
                style="width: 70%"
                placeholder="滞纳金比例"
                v-model:value="modelRef.ratio"
                :min="0"
              />
              <span class="item-unit">%/天</span>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item label="滞纳金上限">
            <a-input-group compact>
              <a-input-number
                style="width: 70%"
                placeholder="滞纳金上限"
                v-model:value="modelRef.toplimit"
                :min="0"
              />
              <span class="item-unit">%</span>
            </a-input-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive, watch } from "@vue/runtime-core";
import { Form } from "ant-design-vue";
import store from "../../../../store";

const useForm = Form.useForm;

export default defineComponent({
  name: "CTLateFee",
  props: {
    validateTrigger: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    /** 表单 */
    const modelRef = reactive({ ratio: "", startDay: "", toplimit: "" });
    const requiredRule = [{ required: true, message: "必填" }];
    const rulesRef = reactive({});
    const { validate, validateInfos } = useForm(modelRef, rulesRef);

    const validateForm = () => {
      validate().then(() => {
        emit("getResult", {
          params: { latefee_clause: { ...modelRef } },
          type: "LateFee",
        });
      });
    };

    watch(
      () => props.validateTrigger,
      () => {
        validateForm();
      }
    );

    /** 初始化 */
    const init = () => {
      const detail = store.getters.currentContractTpl;
      if (detail.latefee_clause) {
        for (let key in modelRef) {
          modelRef[key] = detail.latefee_clause[key];
        }
      }
    };
    init();

    return {
      modelRef,
      validateInfos,
    };
  },
});
</script>
